<template>
  <n-grid :cols="1" y-gap="15">
    <n-gi>
      <n-spin :show="show1" description="请稍候...">
        <n-card :bordered="false" :header-style="{
                    padding: '25px 20px',
                  }" :content-style="{
                    padding: '0 20px 20px',
                  }">
          <template #header>
            <div class="room-stat-title">会员信息</div>
            <div class="room-stat-div">
              <span class="room-stat-time">在{{ nowTime }}刷新</span>
              <n-button text style="margin-left: 20px" @click="refreshBaseInfo">
                <img
                  style="width: 16px;"
                  src="@/assets/images/pms_dashboard_refresh_icon.png"
                />
                <span class="room-stat-refresh">刷新</span>
              </n-button>
            </div>
          </template>
          <n-grid :cols="4" x-gap="15">
            <n-gi>
              <div class="room-stat-gi-div">
                <div class="room-stat-gi-div-item">
                  <div class="room-stat-gi-div-item-d1">会员总数</div>
                  <div class="room-stat-gi-div-item-d2">{{memberBaseStat.memberTotal}}</div>
                </div>
                <div class="room-stat-gi-div-image">
                  <img
                    style="width: 100%;"
                    src="@/assets/images/member_stat_icon1.png"
                  />
                </div>
              </div>
            </n-gi>
            <n-gi>
              <div class="room-stat-gi-div">
                <div class="room-stat-gi-div-item">
                  <div class="room-stat-gi-div-item-d1">今日增加会员</div>
                  <div class="room-stat-gi-div-item-d2">{{memberBaseStat.todayMemberAdd}}</div>
                </div>
                <div class="room-stat-gi-div-image">
                  <img
                    style="width: 100%;"
                    src="@/assets/images/member_stat_icon2.png"
                  />
                </div>
              </div>
            </n-gi>
            <n-gi>
              <div class="room-stat-gi-div">
                <div class="room-stat-gi-div-item">
                  <div class="room-stat-gi-div-item-d1">会员积分池</div>
                  <div class="room-stat-gi-div-item-d2">{{memberBaseStat.memberBalanceTotal}}</div>
                </div>
                <div class="room-stat-gi-div-image">
                  <img
                    style="width: 100%;"
                    src="@/assets/images/member_stat_icon3.png"
                  />
                </div>
              </div>
            </n-gi>
            <n-gi>
              <div class="room-stat-gi-div">
                <div class="room-stat-gi-div-item">
                  <div class="room-stat-gi-div-item-d1">今日下单会员</div>
                  <div class="room-stat-gi-div-item-d2">{{memberBaseStat.todayMemberOrderCount}}</div>
                </div>
                <div class="room-stat-gi-div-image" style="margin-right: 10px">
                  <MemberOrderPie :memberOrderPercent="memberOrderPie.memberOrderPercent" :memberNotOrderPercent="memberOrderPie.memberNotOrderPercent"/>
                </div>
              </div>
            </n-gi>
          </n-grid>
        </n-card>
      </n-spin>
    </n-gi>
    <n-gi>
      <n-grid x-gap="15" :cols="2">
        <n-gi>
          <n-spin :show="show2" description="请稍候...">
            <div class="member-stat-div">
              <div class="member-stat-div-title">新增会员趋势</div>
              <MemberCreateLine :dateList="memberCreateTrendDateList" :numList="memberCreateTrendNumList"/>
            </div>
          </n-spin>
        </n-gi>
        <n-gi>
          <n-spin :show="show3" description="请稍候...">
            <div class="member-stat-div">
              <div class="member-stat-div-title">会员消费趋势</div>
              <MemberOrderLine :dateList="memberOrderTrendDateList" :moneyList="memberOrderTrendMoneyList"/>
            </div>
          </n-spin>
        </n-gi>
      </n-grid>
    </n-gi>
    <n-gi>
      <n-grid x-gap="15" :cols="2">
        <n-gi>
          <n-spin :show="show4" description="请稍候...">
            <div class="member-stat-div">
              <div class="member-stat-div-title">会员来源</div>
              <MemberFromPie :percentList="memberSourcePercentList"/>
            </div>
          </n-spin>
        </n-gi>
        <n-gi>
          <n-spin :show="show5" description="请稍候...">
            <div class="member-stat-div">
              <div class="member-stat-div-title">会员等级比率</div>
              <MemberLevelPie :percentList="memberLevelPercentList"/>
            </div>
          </n-spin>
        </n-gi>
      </n-grid>
    </n-gi>
  </n-grid>

</template>

<script setup lang="ts">
import MemberOrderPie from './components/MemberOrderPie.vue';
import MemberCreateLine from './components/MemberCreateLine.vue';
import MemberOrderLine from './components/MemberOrderLine.vue';
import MemberFromPie from './components/MemberFromPie.vue';
import MemberLevelPie from './components/MemberLevelPie.vue';
import {onMounted, ref} from "vue";
import { Stat } from '@/api/pmsMember';
import {formatToDateTime} from "@/utils/dateUtil";
import {dashboard} from "@/api/comm";

const show1 = ref(false);
const show2 = ref(false);
const show3 = ref(false);
const show4 = ref(false);
const show5 = ref(false);
const today = ref('');
const memberBaseStat = ref({
  memberTotal: 0,
  todayMemberAdd: 0,
  memberBalanceTotal: 0,
  todayMemberOrderCount: 0,
});
const memberOrderPie = ref({
  memberOrder: 0,
  memberOrderPercent: 0,
  memberNotOrder: 0,
  memberNotOrderPercent: 0,
})
const memberCreateTrendDateList = ref([])
const memberCreateTrendNumList = ref([])
const memberOrderTrendDateList = ref([])
const memberOrderTrendMoneyList = ref([])
const memberSourcePercentList = ref([])
const memberLevelPercentList = ref([])
const nowTime = ref(formatToDateTime(new Date(), 'yyyy-MM-dd hh:mm:ss'));

function refreshBaseInfo(){
  nowTime.value = formatToDateTime(new Date(), 'yyyy-MM-dd HH:mm:ss');
  Load1()
}

const Load1 = () => {
  show1.value = true;
  Stat({
    type: "memberBaseStat"
  }).then((res) => {
    memberBaseStat.value = res.memberBaseStat
    Load1More();
  }).catch((err)=>{
    Load1More();
  })
};

const Load1More = () => {
  Stat({
    type: "memberOrderPie"
  }).then((res) => {
    memberOrderPie.value = res.memberOrderPie
    show1.value = false;
  }).catch((err)=>{
    show1.value = false;
  })
};

const Load2 = () => {
  show2.value = true;
  Stat({
    type: "memberCreateTrend"
  }).then((res) => {
    memberCreateTrendDateList.value = res.memberCreateTrend.map((item) => {
      return item.date
    })
    memberCreateTrendNumList.value = res.memberCreateTrend.map((item) => {
      return item.num
    })
    show2.value = false;
  }).catch((err)=>{
    show2.value = false;
  })
};

const Load3 = () => {
  show3.value = true;
  Stat({
    type: "memberOrderTrend"
  }).then((res) => {
    memberOrderTrendDateList.value = res.memberOrderTrend.map((item) => {
      return item.date
    })
    memberOrderTrendMoneyList.value = res.memberOrderTrend.map((item) => {
      return item.money
    })
    show3.value = false;
  }).catch((err)=>{
    show3.value = false;
  })
};

const Load4 = () => {
  show4.value = true;
  Stat({
    type: "memberSource"
  }).then((res) => {
    memberSourcePercentList.value = res.memberSource.map((item) => {
      return {
        value: item.percent,
        name: item.source
      }
    })
    show4.value = false;
  }).catch((err)=>{
    show4.value = false;
  })
};

const Load5 = () => {
  show5.value = true;
  Stat({
    type: "memberLevel"
  }).then((res) => {
    memberLevelPercentList.value = res.memberLevel.map((item) => {
      return {
        value: item.percent,
        name: item.levelName
      }
    })
    show5.value = false;
  }).catch((err)=>{
    show5.value = false;
  })
};

onMounted(() => {
  Load1();
  Load2();
  Load3();
  Load4();
  Load5();
});
</script>

<style scoped lang="less">
.room-stat-title{
  font-size: 20px;
  color: #3D3D3D;
  font-weight: 500;
  line-height: 28px
}
.room-stat-div{
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 11px
}
.room-stat-time{
  font-size: 14px;
  color: #8B8B8B;
  font-weight: 400;
  line-height: 20px
}
.room-stat-refresh{
  font-size: 14px;
  color: #156BFF;
  line-height: 20px;
  margin-left: 5px
}
.room-stat-gi-div{
  border-radius: 2px;
  background: #F9FBFF;
  display: flex;
  align-items: center;
  .room-stat-gi-div-item{
    flex: 1;
    margin-left: 20px;
    .room-stat-gi-div-item-d1{
      font-size: 14px;
      color: #3D3D3D;
      font-weight: 500;
      line-height: 20px;
    }
    .room-stat-gi-div-item-d2{
      margin-top: 5px;
      font-size: 36px;
      color: #3D3D3D;
      font-weight: 700;
      line-height: 42px;
    }
  }
  .room-stat-gi-div-image{
    width: 140px;
    height: 137px;
  }
}

.member-stat-div{
  background: #FFFFFF;
  border-radius: 4px;
  height: 375px;
  padding: 25px 16px 16px 29px;
  .member-stat-div-title{
    font-weight: 500;
    font-size: 18px;
    color: #3D3D3D;
    line-height: 25px;
    margin-bottom: 15px;
  }
}
</style>
